<%
const getDefaultText = (type) => {
    switch (type) {
        case 'draft':
            return '草稿';
        case 'new':
            return '新添加';
        case 'deprecated':
            return '已过期';
        case 'updated':
            return '已更新';
        case 'custom':
            return '自定义';
        default:
            return '';
    }
}

// 添加默认图标的渲染函数
const renderDefaultIcon = (type) => {
    switch (type) {
        case 'draft':
            return `<svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
      </svg>`;
        case 'new':
            return `<svg class="w-4 h-4 text-green-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>`;
        case 'deprecated':
            return `<svg class="w-4 h-4 text-red-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>`;
        case 'updated':
            return `<svg class="w-4 h-4 text-blue-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
      </svg>`;
        default:
            return '';
    }
}
%>

<% if (item.status?.type) { %>
    <div class="inline-flex items-center">
        <div data-tooltip="<%= item.status.text || getDefaultText(item.status.type) %>" class="relative status-container">
            <% if (item.status.type === 'custom') { %>
                <% if (locals.siteData.feature?.lucide?.enable && item.status.icon) { %>
                    <!-- Lucide 图标 -->
                    <i data-lucide="<%= item.status.icon %>" class="w-4 h-4 text-gray-600 hover:opacity-80 cursor-pointer status-icon"></i>
                <% } else if (item.status.icon && item.status.icon.includes('<svg')) { %>
                    <!-- 自定义 SVG 图标 -->
                    <span class="inline-block w-4 h-4 hover:opacity-80 cursor-pointer status-icon">
                        <%- item.status.icon %>
                    </span>
                <% } else { %>
                    <!-- 默认图标，当没有提供有效的图标时 -->
                    <svg class="w-4 h-4 text-gray-500 hover:opacity-80 cursor-pointer status-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                <% } %>
            <% } else { %>
                <%- renderDefaultIcon(item.status.type) %>
            <% } %>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 创建或获取 tooltips 容器
            let tooltipContainer = document.getElementById('tooltip-container');
            if (!tooltipContainer) {
                tooltipContainer = document.createElement('div');
                tooltipContainer.id = 'tooltip-container';
                document.body.appendChild(tooltipContainer);
            }

            // 创建单个 tooltip 元素
            const tooltip = document.createElement('div');
            tooltip.className = 'fixed hidden px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-[9999] pointer-events-none transition-opacity duration-200';
            tooltipContainer.appendChild(tooltip);

            // 监听所有状态图标
            document.querySelectorAll('.status-container').forEach(container => {
                const icon = container.querySelector('.status-icon');
                const text = container.dataset.tooltip;

                container.addEventListener('mouseenter', () => {
                    const rect = container.getBoundingClientRect();
                    tooltip.textContent = text;
                    tooltip.style.display = 'block';

                    // 获取 tooltip 的尺寸
                    const tooltipRect = tooltip.getBoundingClientRect();

                    // 计算位置
                    let top = rect.top - tooltipRect.height - 8;
                    const left = rect.left + (rect.width - tooltipRect.width) / 2;

                    // 如果顶部空间不足，显示在底部
                    if (top < 8) {
                        top = rect.bottom + 8;
                    }

                    tooltip.style.top = `${top}px`;
                    tooltip.style.left = `${left}px`;
                });

                container.addEventListener('mouseleave', () => {
                    tooltip.style.display = 'none';
                });
            });

            // 处理页面滚动时更新位置
            window.addEventListener('scroll', () => {
                const visibleTooltip = document.querySelector('#tooltip-container div[style*="display: block"]');
                if (visibleTooltip) {
                    const container = document.querySelector('.status-container:hover');
                    if (container) {
                        const rect = container.getBoundingClientRect();
                        const tooltipRect = visibleTooltip.getBoundingClientRect();

                        let top = rect.top - tooltipRect.height - 8;
                        if (top < 8) {
                            top = rect.bottom + 8;
                        }

                        visibleTooltip.style.top = `${top}px`;
                        visibleTooltip.style.left = `${rect.left + (rect.width - tooltipRect.width) / 2}px`;
                    }
                }
            }, {passive: true});
        });
    </script>
<% } %>